<template>
  <div>
    <transition name='xiaoniu' appear mode="out-in">
      <router-view></router-view>
    </transition>
    <the-tab></the-tab>
  </div>
</template>

<script>
import theTab from '@/components/TheTab'
export default {
  components: {
    theTab
  }
}
</script>
<style>
*{
  padding: 0;
  margin: 0;
  border:none;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
html,body{
  height: 100%;
}
body{
  background: rgb(255, 255, 255);
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
</style>
<style scoped>
@keyframes xn {
  0%{
    opacity: 0;
    transform: translateY(50px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}
.xiaoniu-enter-active{
  animation:xn 0.5s;
}
.xiaoniu-leave-active{
  animation:xn 0.5s reverse;
}
</style>
